import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import {Button, Menu,Dropdown,  Modal, Popover} from 'antd'

const confirm = Modal.confirm;

import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyAttention')
@observer
class NewAttentionTool extends React.Component {
    constructor(props) {
        super(props);
        this.apply = this.apply.bind(this);
    }

    apply(event) {
        event.stopPropagation();
        let {attentionStatus, islower, userId, callback,specialStatus} = this.props;

        let _this = this
        if(specialStatus == '2') {
            confirm({
                title: getLabel('384420',"确认要取消关注吗？"),
                content: '',
                onOk (){
                    _this.props.cancelSpecialUser({specid:userId});
                },
                onCancel() {},
            });
        } else {
            confirm({
                title:getLabel(514285,'特别关注') ,
                content: getLabel(514423,'设为特别关注后，将收到对方的新微博提醒')  ,
                onOk (){
                    _this.props.addSpecialUser({specid:userId});
                },
                onCancel() {},
            });
        }
    }

    render() {
        /**
         *
         * attentionStatus
         1表示单向关注，按钮显示 取消关注。
         2表示双向关注，按钮显示 取消关注。
         3表示没有关注关系，且不是上下级关系。 按钮显示 申请关注。
         4表示没有关注关系，且不是上下级关系，且已发送申请。按钮显示 已发送申请。
         5表示没有关注关系，且是上下级关系。按钮显示 添加关注。
         isreceive==0,不允许申请关注
         */
        let text=getLabel(26938,"取消关注");
        let {isreceive, attentionStatus,specialStatus} = this.props;
        let className = "icon-blog-CancelConcern";
        switch(this.props.specialStatus) {
            case "1": text=getLabel(514285,'特别关注') ;className = "icon-blog-AddTo";break;
            case "2":text=getLabel(514285,'特别关注') ;className = "icon-blog-AlreadyConcern";break;
            default: break;
        }

        const menu = (
            <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@rgchb5`} style={{"height":"32px"}}>
                <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@cqsdgc`} style={{"height":"32px"}} title={getLabel(514283,'取消特别关注')}>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8e0tej`}  style={{"margin-left":" -15px","top":" -6px","width":"98px","border-style":"none","height": "30px",
                        "border-radius": 4,"font-size": "12px"}} onClick={(event) => {
                        this.apply(event);
                    }}>{getLabel(514283,'取消特别关注') }</Button>
                </Menu.Item>
            </Menu>
        );

         if(specialStatus=='2'){
             return <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@eykycg`} overlay={menu}  overlayStyle={{"width":"100px"}}><a className="tool"  style={{"position": "absolute","margin-left": 105,"margin-top":"-30px"}}><span className={className} />{text}</a></Dropdown>
         }

        return (
            (isreceive == '0' && attentionStatus == '3')
                ? <span />
                :  <a className="tool"  onClick={this.apply} style={{"position": "absolute","margin-left": 105,"margin-top":"-30px"}}><span className={className} />{text}</a>

        );
    }
}

NewAttentionTool.propTypes = {
    attentionStatus: React.PropTypes.string,//当前关注状态
    userId: React.PropTypes.string,//人员id
    islower: React.PropTypes.string,//后台需要的参数
    callback: React.PropTypes.func//用户点击按钮、执行成功后的回调。
};

export default NewAttentionTool;